<template>
	<!-- main -->
	<div class="main">
		<!-- tit -->
		<div class="main-icon">
			<div class="main-icon-a">
				<i :class="iconComes"
					style="border-radius: 50%;font-size: 20px;padding: 6px;margin-left: 8px;;background-color: #5a5a5a;color: #fff;"></i>
				<span style="font-size: 12px;font-weight:bold;margin-left: 12px;color: #606266;">{{ TreeValName }}</span>
			</div>
			<!-- btn1 -->
			<div class="main-icon-b">
				<span style="font-size: 12px;color: #606266;font-weight: bold;">状态：</span>
				<el-dropdown @command="handleCommand" trigger="click">
					<span class="el-dropdown-link">{{ DropDownedName }}<i class="el-icon-down el-icon--right"></i></span>
					<el-dropdown-menu slot="dropdown">
					  <el-dropdown-item command="a">可用</el-dropdown-item>
					  <el-dropdown-item command="b">禁用</el-dropdown-item>
					  <el-dropdown-item command="c" divided>全部</el-dropdown-item>
					</el-dropdown-menu>
			    </el-dropdown>
			</div>
			<!-- btn2 -->
			<div class="main-icon-c">
				<span style="font-size: 12px;color: #606266;font-weight: bold;display: inline-block;width: 68px;">关键字：</span>
				<el-input size="mini" placeholder="编码、名称、拼音简码" suffix-icon="el-icon-key" v-model="searchValue"></el-input>
			</div>
			<!-- btn3 -->
			<div class="main-icon-c">
				<el-button v-for="(v,i) in headerBtn" :key="i" :type="v.type" :loading="v.loading" :icon="v.icon" size="mini" @click="handClick(i)">{{ v.title }}</el-button>
			</div>
		</div>
	<!-- table -->
	<div class="table">
		<el-table :data="tableData" border @row-dblclick="handledbRow" :style="{ width:clientWidth + 'px'}" size='mini' v-loading="loading" element-loading-spinner="el-icon-more-outline">
			<el-table-column v-for="(col, inx) in tableRows" :key="inx" :type="col.type" :prop="col.prop" :label="col.name" :width="columnWidth(col, tableData)"></el-table-column>
			<!-- fixed -->
			<el-table-column fixed="left" label="行号" type="index" width="50" align="center"></el-table-column>
			<!-- edit -->
			<el-table-column fixed="right" label="操作" width="88">
			  <template slot-scope="scope">
					<el-button type="text" @click="editFormValue(scope.row)" size="mini">编辑</el-button>
					<el-button type="text" @click="handleDelete(scope.row.id)" size="mini">删除</el-button>
			  </template>
			</el-table-column>
		</el-table>
	</div>
	<!-- main => 新增模态框  -->
	<div :class="DialogVisible">
		<el-dialog :title="Dialogtitle" :visible.sync="DialogVisible"  width="68%" :before-close="handleClose">
			<div class="add" v-if="Dialogtitle == '新增'">
				<addDialog ref="handleFormSubmit" @callChild="callChild" :totalSize="totalSize"></addDialog>
			</div>
			<div class="watch" v-if="Dialogtitle == '查看'">
				<watchDialog :PertObj="watchValue"></watchDialog>
			</div>
			<div class="edit" v-if="Dialogtitle == '编辑'">
				<editDialog :PertObj="editValue"></editDialog>
			</div>
		</el-dialog>
	</div>
	<!-- feet -->
	<div class="feet">
		<!-- 分页 -->
		<el-pagination
		@size-change="handleSizeChange"
		@current-change="handleCurrentChange"
		:current-page="pageNum"
		:page-sizes="[8, 50, 150]"
		:page-size="pageSize"
		layout="total, sizes, prev, pager, next, jumper"
		:total="totalSize"
		background
		>
		</el-pagination>
	</div>
	
	</div>
</template>

<script>
	// selfs / bus
	import { EventBus } from '@/external/asetSelf/event-bus.js'; //事件总线
	// selfs / js
	import Pinyin from "@/external/pinyin.js"; //中译音
	import tableRows from './MedicenCataTableROWS.js'
	import MedicenCata from '@/external/MedicenCata.js'
	// selfs / props
	import addDialog from './addDialogVisible.vue' //新增model
	import watchDialog from './watchDialogVisible.vue' //查看model
	import editDialog from './editDialogVisible.vue' //编辑model
	// 接口
	import { 
		getDrugList,
		selectByDrugCatalogue,addDrugInformation,updateDrugInformation,
		getManufacturer,getDrugManufacturer
	 } 
	from "@/api/systemCatalogue/MedicenCata.js";
	export default {
		props:{
			CatalogueName: {  
			  type: String,  
			  required: true,  
			},  
		},
		components: {
			MedicenCata,tableRows,
			addDialog,watchDialog,editDialog
		},
	data() {
		return {
			// str
			TreeValName:'', //用于接收左侧树菜单点击值
			iconComes:'el-icon-xy',  //main
			DropDownedName:'可用',
			searchValue:'', //搜索框inputValue
			Dialogtitle:'',//模态框的新增、查看、编辑
			clientHeight: 0,//表格的高度
			clientWidth: document.body.clientWidth - 400, //表格的宽度
			// number
			dataIndex: 0,
			indexTime:0,
			pageNum: 1, //当前页currentPage
			pageSize: 8,
			totalSize: 0, //总条数
			//blean
			loading:false, //加载事件
			
			DialogVisible:false,//控制所有模态框
			
			// title右侧按钮
			headerBtn:[
			 // { back:"back", title:"返回", type:"primary" },
			 { refesh:"refesh", title:"刷新", type:"", icon:"el-icon-refresh", loading:false},
			 { add:"add", title:"新增", type:"", icon:"el-icon-plus", loading:false},
			 { senior:"senior", title:"高级", type:"", icon:"el-icon-caret-top", loading:false},
			],
			tableRows:[],//table Rows
			tableData:[],//table data
			watchData:[],//table watch
			watchValue:{},
			editValue:{},
			}
		},
		mounted() {
			//将当前浏览器高度赋给表格的高度 / or 当前宽度除2
			// this.clientHeight = window.innerHeight; 
			// this.clientHeight = this.clientWidth / 2;
			this.loadData();
			// 表格循环Rows
			this.tableRows = tableRows.map(function(v) {
				return v
			})
			// console.log(this.tableRows);
			 EventBus.$on('TreeInfos', (val) => {
			  // 当事件触发时，会打印出信息并将其赋值。
			  this.TreeValName = val.data2.label
			  this.iconComes = 'el-icon-' + this.makePy(val.data2.label)
			  if(val.data1){
				this.loading = val.loading
				setTimeout(() => {
					this.tableData = val.data1
					this.totalSize = val.totalSize
					this.loading = false
				},1500)
			  }else{
				this.tableData = [];
			  }
			});
		},
		//窗口改变是触发的事件
		created() {
		  window.addEventListener("resize", this.resizeHandle);
		  //调用获取数据列表函数
		  this.loadData();
		},
		//窗口触发函数
		resizeHandle() {
		  this.clientWidth = document.clientWidth - 400;
		},
		methods:{
			/*
				数据源
			*/
			async loadData(){
				let res = await getDrugList({
					drugName: this.TreeValName,
					status:'',
					pageNum: this.pageNum,
					pageSize: this.pageSize
				})
				if(res.code === 200){
					// 赋值给Options
					this.tableData = res.data;
					this.CodeNumber = res.data.length
					this.totalSize = res.data.totalSize
				}else{
					this.loading = false;//关闭加载
					this.tableData = [];//null
					this.isShowNewAdd = true//打开新增提示
				}
			},
			// 子组件调用并更新驱动
			callChild(){
				this.loadData();
				console.log('子组件调用并更新驱动');
			},
			/*
				about table
			*/
			// col 里面包含了表头字段和名称，list 是表格数据
			    columnWidth(col, list) {
			      let prop = col.prop,lab = col.lab;
			      let width = 12; // 设定一个最小值
			      let maxlenStr = ""; // 最长字符串
			      for (let info of list) {
			        if (maxlenStr < (info[prop] + "").length) maxlenStr = info[prop];
			      }
			      width = Math.max(width, len(lab), len(maxlenStr));
			      // 表格自带的内边距(20px) 自调
			      return width + 8; // 这里加了 12px
			      function len(str) {
			        // 实际分配长度可根据需要自行调整
			        let length = 0;
			        for (const char of str + "") {
			          // 英文小写字符 8px
			          if ("a" <= char && char <= "z") length += 8;
			          // 英文大写字符 12px
			          else if ("A" <= char && char <= "Z") length += 12;
			          // 中文字符 24px
			          else if (char >= "\u4e00" && char <= "\u9fa5") length += 24;
			          // 其他 8px
			          else length += 12;
			        }
			        return length;
			      }
			},
			// 编辑表格行
			async editFormValue(row){
				let res = await getDrugManufacturer({
					id: row.id
				})
				this.editValue = row
				this.editValue.maps = res.data
				this.DialogVisible = true
				this.Dialogtitle = '编辑'
				this.watchData = row;
				console.log(row);
			},
			/*
				点击事件
			*/
			// db events 双击表格行
			handledbRow(row, column, event){
				if(row){ 
					this.watchValue = row
					console.log(row,'双击过后查看');
					this.DialogVisible = true
					this.Dialogtitle = '查看'
				} else { 
					console.log('fail')
					}
				console.log(this.watchData);
			},
			// 确定提交事件
			submitAdd(){
				console.log(this.$refs.handleFormSubmit.addForm);
			},
			handleFormSubmit(val){
				// this.DialogVisible = false
				// 调用子组件方法
				// this.$refs.addDialog
				console.log(val);
			},
			// 表格上方循环按钮点击
			handClick(i) {
				// i event
				switch (i) {
					case 0:
						this.headerBtn[i].loading = true
						if(this.searchValue == ''){
							setTimeout(() => {
								this.$message.error('关键字不能为空！');
								this.headerBtn[i].loading = false;		
							}, 1500)
						}else{
							this.$confirm('敬请期待')
							.then(_ => {})
							.catch(_ => {});
						}
						break;
					case 1:
						// 新增表格行
						this.DialogVisible = true
						this.Dialogtitle = '新增'
						break;
					case 2:
						// 高级事件
						this.headerBtn[i].loading = true
						setTimeout(() => {
							this.$confirm('敬请期待')
							.then(_ => {})
							this.headerBtn[i].loading = false;
						}, 1500)
				}
			},
			// 下拉选择
			handleCommand(command) {
			  // console.log(command);
			  // 根据 command 值执行相应的逻辑
			  switch (command) {
				case 'a':
				  // 处理a的逻辑
				  console.log('执行A逻辑');
				  this.DropDownedName = '可用'
				  break;
				case 'b':
				  // 处理b的逻辑
				  console.log('执行B逻辑');
				  this.DropDownedName = '禁用'
				  break;
				case 'c':
				  // 处理b的逻辑
				  this.DropDownedName = '全部'
				  break;
				// ... 其他 case
			  }
			},
			/*
			diglog
			*/
			// close
			handleClose(done) {
				done();
			},
			/*
				分页
			*/
			//每页条数改变触发
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageNum = val;
				this.loadData();
			},
			//当前条数改变触发
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.pageNum = val;
				this.loadData();
			},
		},
		
	}
</script>

<style lang="less" scoped>
	/deep/ .el-dialog__title{
		font-size: 12px;
		color: #fff;
	}
	/deep/ .el-form-item__label{
		font-size: 12px;
	}
	/deep/ .el-dialog__headerbtn{
		top: 12px;
	}
	/deep/ .el-dialog__headerbtn .el-dialog__close{
		color: #fff;
	}
	/deep/ .el-dialog__headerbtn .el-dialog__close:hover{
		color: #00007f;
	}
	/deep/ .el-dialog__header{
		background-color: #39648f;
		padding: 8px;
	}
	.main{
		display: flex;
		flex-direction: column;
		// icon
		.main-icon {
			display: flex;
			align-items: center;
			justify-content: left;
			padding: 12px;
			line-height: 40px;
			.main-icon-a{
				// width: 240px;
				// background-color: #00557f;
			}
			.main-icon-b{
				margin-left: 28px;
				/deep/ .el-dropdown{
					font-size: 12px;
					cursor: pointer;
				}
				/deep/ .el-dropdown:hover {
					font-weight: bold;
					color: #66b1ff;
				}
				/deep/ .el-icon--right{
					// background-color: #66b1ff;
				}
				/deep/ .el-popper[x-placement^=bottom]{
					margin-top: 0;
				}
			}
			// c
			.main-icon-c{
				margin-left: 28px;
				display: flex;
				/deep/ [data-v-2bacc09b] .el-color-picker__icon, .el-input[data-v-2bacc09b], .el-textarea[data-v-2bacc09b]{
					width: 80%;
				}
			}
		}
		// table
		.table{
			padding: 8px;
		}
	}
	
</style>